<template>
	<view class="time-line_body">
		<view class="time-line_item u-flex-1" v-for="(item,index) in list" :key="index">
			<view class="time-line_img">
				<u-line v-if="index === 0" color="#8AD4AD" />
				<u-line v-else color="rgba(255,255,255,0.5)" />

				<!-- 当前状态 -->
				<image v-if="item.type <= type" class="status-img" src="@/static/img/icon_jindu1.png"></image>
				<!-- 当前状态的下一个状态 -->
				<image v-else class="status-img" src="@/static/img/icon_jindu2.png"></image>
				<u-line v-if="list.length === (index+1)" color="#8AD4AD" />
				<u-line v-else color="rgba(255,255,255,0.5)" />
			</view>
			<view class="status-title">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			status: {
				type: [String, Number],
				default: null
			}
		},
		data() {
			return {
				list: [{
						type: 1,
						name: '买家下单'
					},
					{
						type: 2,
						name: '确认下单'
					},
					{
						type: 3,
						name: '双方签约'
					},
					{
						type: 4,
						name: '商家发货'
					},
					{
						type: 5,
						name: '买家收货'
					},
					{
						type: 6,
						name: '交易成功'
					},
				],
				type: 0
			}
		},
		mounted() {
			// { value: 1, label: "待确认" }, //买家下单 1
			// { value: 2, label: "待进口商确认" },//确认下单 2
			// { value: 3, label: "待平台审核" },//确认下单 2
			// { value: 4, label: "待签约" }, //双方签约 3
			// { value: 5, label: "待发货" },  //双方签约3
			// { value: 6, label: "货运中" }, //商家发货4
			// { value: 7, label: "已到港" },//商家发货4
			// { value: 8, label: "提车申请" },//商家发货4
			// { value: 9, label: "已提车" },//买家收货5
			// { value: 10, label: "已完成" },//交易成功6
			// { value: 0, label: "已取消" }
			this.type = {
				1: 1,
				2: 2,
				3: 2,
				4: 3,
				5: 3,
				6: 4,
				7: 4,
				8: 4,
				9: 5,
				10: 6
			} [this.status]
		}

	}
</script>

<style scoped lang="less">
	.time-line_body {
		display: flex;

		.time-line_item {
			display: flex;
			text-align: center;
			justify-content: center;
			flex-direction: column;

			.time-line_img {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.status-img {
					width: 13px;
					height: 13px;
					margin: 0 auto;
				}
			}


			.status-title {
				margin-top: 8px;
				font-size: 10px;
				color: rgba(255, 255, 255, 0.64);
			}
		}
	}
</style>